<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮和折叠插件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!--按钮-->
<!--单个切换-->
<button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>
<!--单选按钮-->
<div class="btn-group" data-toggle="buttons">
    <label for="" class="btn bg-primary active">
        <input type="radio" age="sex" autocomplete="off" checked>男
    </label>
    <label for="" class="btn bg-primary ">
        <input type="radio" age="sex" autocomplete="off" checked>女
    </label>
</div>
<!--复选类似-->


<!--加载状态-->
<button class="btn btn-primary"  data-loading-text="Loading..."  autocomplete="off">
    加载状态
</button>


<!-- 折叠-->
<!--基本实例-->
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">
    Bootstrap
</button>
<div class="collapse" id="content">
    <div data-toggle="well">
        Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
    </div>
</div>

<!--手风琴折叠-->
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">点击我进行展示,再点击我进行折叠,第一部分</a>
            </h4>
        </div>
         <div id="collapseOne" class="panel-collapse collapse ">
             <div class="panel-body">
                 这里是第一部分
             </div>
         </div>
    </div>
    <div class="panel panel-default">
         <div class="panel-heading">
             <h4 class="panel-title">
                 <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">点击我进行展示,再点击我进行折叠,第二部分</a>
             </h4>
         </div>
         <div id="collapseTwo" class="panel-collapse collapse ">
             <div class="panel-body">
                 这里是第二部分
             </div>
         </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">点击我进行展示,再点击我进行折叠,第三部分</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse ">
            <div class="panel-body">
                这里是第三部分
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">点击我进行展示,再点击我进行折叠,第四部分</a>
            </h4>
        </div>
        <div id="collapseFour" class="panel-collapse collapse ">
            <div class="panel-body">
                这里是第四部分
            </div>
        </div>
    </div>
</div>





<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--button方法中有三个参数:toggle,reset,string(比如loading,complete)-->
<script type="text/javascript">
    $('myButton').on('click',function () {
        var btn = $(this).button('loading');
        setTimeout(function () {
            btn.button('reset');
        },1000);
    });
</script>

</body>
</html>